<template>
  <div>
    <div>Canvas progress</div>
    <canvas id="process" width="200" height="200" />
  </div>
</template>
<script>
export default {
  name: 'Bar',
  data() {
    return {
    }
  },
  computed: {
  },
  created() {

  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      var c = document.getElementById('process')
      var process = 0
      var ctx = c.getContext('2d')

      // 画灰色的圆
      ctx.beginPath()
      ctx.arc(100, 100, 80, 0, Math.PI * 2)
      // ctx.closePath();
      ctx.strokeStyle = 'green'
      ctx.stroke()

      // 画红色的圆
      ctx.beginPath()
      ctx.arc(100, 100, 70, 0, Math.PI * 2)
      // ctx.closePath();
      ctx.fillStyle = 'red'
      ctx.fill()

      function animate() {
        requestAnimationFrame(function() {
          process = process + 1
          drawCricle(ctx, process)
          if (process < 90) {
            animate()
          }
        })
      }

      function drawCricle(ctx, percent) {
        // 画进度环
        ctx.beginPath()
        ctx.moveTo(100, 100)
        ctx.arc(100, 100, 80, Math.PI * 1.5, Math.PI * (1.5 + 2 * percent / 100))
        ctx.closePath()
        ctx.fillStyle = 'yellow'
        ctx.fill()

        // 画内填充圆
        ctx.beginPath()
        ctx.arc(100, 100, 60, 0, Math.PI * 2)
        ctx.closePath()
        ctx.fillStyle = '#fff'
        ctx.fill()

        // 填充文字
        ctx.font = 'bold 20pt Microsoft YaHei'
        ctx.fillStyle = '#333'
        ctx.textAlign = 'center'
        ctx.textBaseline = 'middle'
        ctx.moveTo(100, 100)
        ctx.fillText(process + '%', 100, 100)
      }

      animate()
    }
  }
}
</script>
